<template>
  <v-scroll
    class="suggest"
    :pullup="pullup"
    @scrollToEnd="searchMore"
    :beforeScoll="beforeScoll"
    @beforeScoll="listScroll"
    :data="result"
  >
    <ul class="suggest-list">
      <li
        class="suggest-item"
        v-for="(song, index) in result"
        :key="index"
        @click="playItem(song)"
      >
        <div class="icon"><i class="icon">&#xe641;</i></div>
        <div class="name">
          <p class="text">{{ getDisplayName(song) }}</p>
        </div>
      </li>
    </ul>
  </v-scroll>
</template>

<script>
import scroll from "@/components/scroll.vue";
import api from "@/api";
export default {
  props: {
    query: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      pullup: true,
      beforeScoll: true,
      page: 1,
      result: [],
      hasMore: true,
    };
  },
  components: {
    "v-scroll": scroll,
  },
  methods: {
    searchMore() {
      if (this.hasMore) {
        this.page++;
        this.fetchResult(this.page);
      }
      console.log(this.result);
    },

    listScroll() {},
    search() {
      this.page = 1;
      this.haseMore = true;
      this.result = [];
      this.fetchResult(this.page);
    },
    getDisplayName(item) {
      // console.log(item);
      return `${item.name}-${item.artists[0] && item.artists[0].name}`;
    },
    fetchResult(page) {
      const params = {
        limit: 20,
        offset: page - 1,
        keywords: this.query,
      };

      api.MusicSearch(params).then((res) => {
        this.result.push(...res.data.result.songs);
        this.hasMore = res.data.result.hasMore;
      });
    },
    playItem(item){
      console.log('playmusic');
      this.$emit('playMusic',item)
    }
  },

  watch: {
    query(newValue) {
      if (!newValue) {
        return;
      } else {
        this.search();
      }
    },
  },
};
</script>

<style lang="less">
@import "../assets/css/function.less";
.suggest {
  height: 100%;
  overflow: hidden;

  .suggest-list {
    .px2rem(padding-left, 60);
    .px2rem(padding-right, 60);

    .suggest-item {
      display: flex;
      align-items: center;
      .px2rem(line-height, 80);
    }

    .icon {
      .px2rem(width, 60);
      font-size: 14px;
      color: hsla(0, 0%, 100%, 0.712);
    }

    .name {
      flex: 1;
      font-size: 14px;
      color: hsla(0, 0%, 100%, 0.712);
      overflow: hidden;

      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .loading-wraper {
      .px2rem(height, 80);
    }
  }

  .no-result-wrapper {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    span {
      font-size: 14px;
      color: hsla(0, 0%, 100%, 0.3);
    }
  }
}
</style>
